<template>
	<section style="width: 1200px;margin: 0 auto;" onload="init()">
		<div class="tuzhi-content" style="position: relative;">
			<img src="../../../static/img/draw/shapanimg_01.jpg"/>
			<div class="table-content clearfix">
				<img src="../../../static/img/draw/shapanline_03.jpg"/>
				<div class="thinkcss change">
				<table width="100%" class="table-content" data-resizable-columns-id="demo-table">
					<thead>
						<tr class="tr-first">
							<th width="50%" colspan="2">user 消费者</th>
							<th width="50%" colspan="2"> service provider提供服务方</th>
						</tr>
						<tr class="tr-second">
							<th>消费者需求</br>NEED</th>
							<th>消费者使用流程</br>ACTIVITY</th>
							<th>接触点</br>TOUCH POINT</th>
							<th>回答</br>ANSWERS</th>
						</tr>
					</thead>
				</table>
					<span class="tablecontent">
				      <div id="myPaletteDiv" ></div>
				    </span>
				 
					<div id="sample">
					  <div style="width:100%; white-space:nowrap;">

						
					    <span style="display: inline-block; vertical-align: top; width:100%">
					      <div id="myDiagramDiv"></div>
					    </span>
					  </div>
					</div>			
				</div>			
			</div>
		</div>		
	</section>
</template>

<script>
			function showPorts(node, show) {
			    var diagram = node.diagram;
			    if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
			    node.ports.each(function(port) {
			        port.stroke = (show ? "white" : null);
			      });
		    }
	export default{
		data(){
			return{
				myDiagram:'',
				data:{},
				myPalette:"",
				content:'',
				use:false
			}
		},
		created(){
			var _this=this;
			if(_this.tochild.use==false){
				_this.use=false
			}else{
				_this.use=true
			}				
		},		
		watch:{
			'tochild.content':function(){
	  		  let _this = this;
				if(this.tochild.content){
					this.data=this.tochild.content;
				} 		  
	  		  this.load()		
			}			
		},		
		props:['tochild'],
		mounted(){	
  		  let _this = this;
			if(this.tochild.content){
				this.data=this.tochild.content;
			} 		  
  		  this.init()
		},	
		methods:{
			init(){
				var go=this.go;
				var _this=this;
			    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
			    var $ = go.GraphObject.make;  // for conciseness in defining templates
			
			    _this.myDiagram =
			      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
			        {
			           "toolManager.mouseWheelBehavior":go.ToolManager.WheelNone,//鼠标滚轮事件禁止
			          allowDrop: true,  // must be true to accept drops from the Palette
			          "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
			          "LinkRelinked": showLinkLabel,
			          "animationManager.duration": 800, // slightly longer than default (600ms) animation
			          "undoManager.isEnabled": true , // enable undo & redo
			          'initialPosition': new go.Point(0,0),
			        });

			
			    // helper definitions for node templates
			
			    function nodeStyle() {
			      return [
			        // The Node.location comes from the "loc" property of the node data,
			        // converted by the Point.parse static method.
			        // If the Node.location is changed, it updates the "loc" property of the node data,
			        // converting back using the Point.stringify static method.
			        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
			        {
			          // the Node.location is at the center of each node
			          locationSpot: go.Spot.Center,
			          //isShadowed: true,
			          //shadowColor: "#888",
			          // handle mouse enter/leave events to show/hide the ports
			          mouseEnter: function (e, obj) {showPorts(obj.part, true); },
			          mouseLeave: function (e, obj) {showPorts(obj.part, false); }
			        }
			      ];
			    }
			
			    function makePort(name, spot, output, input) {
			      return $(go.Shape, "Circle",
			               {
			                  fill: "transparent",
			                  stroke: null,  // this is changed to "white" in the this.showPorts function
			                  desiredSize: new go.Size(8, 8),
			                  alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
			                  portId: name,  // declare this object to be a "port"
			                  fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
			                  fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
			                  cursor: "pointer"  // show a different cursor to indicate potential link point
			               });
			    }
			
			    // define the Node templates for regular nodes
			
			    var lightText = 'whitesmoke';
			
			    this.myDiagram.nodeTemplateMap.add("",  // the default category
			      $(go.Node, "Spot", nodeStyle(),
			        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
			        $(go.Panel, "Auto",
			          $(go.Shape, "Rectangle",
			            { fill: "#00A9C9", stroke: null },
			            new go.Binding("figure", "figure")),
			          $(go.TextBlock,
			            {
			              font: "bold 11pt Helvetica, Arial, sans-serif",
			              stroke: lightText,
			              margin: 8,
			              maxSize: new go.Size(160, NaN),
			              wrap: go.TextBlock.WrapFit,
			              editable: true
			            },
			            new go.Binding("text").makeTwoWay())
			        ),
			        // four named ports, one on each side:
			        makePort("T", go.Spot.Top, false, true),
			        makePort("L", go.Spot.Left, true, true),
			        makePort("R", go.Spot.Right, true, true),
			        makePort("B", go.Spot.Bottom, true, false)
			      ));
			
			    this.myDiagram.nodeTemplateMap.add("开始",
			      $(go.Node, "Spot", nodeStyle(),
			        $(go.Panel, "Auto",
			          $(go.Shape, "Circle",
			            { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
			          $(go.TextBlock, "开始",
			            { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
			            new go.Binding("text"))
			        ),
			        // three named ports, one on each side except the top, all output only:
			        makePort("L", go.Spot.Left, true, false),
			        makePort("R", go.Spot.Right, true, false),
			        makePort("B", go.Spot.Bottom, true, false)
			      ));
			
			    this.myDiagram.nodeTemplateMap.add("结束",
			      $(go.Node, "Spot", nodeStyle(),
			        $(go.Panel, "Auto",
			          $(go.Shape, "Circle",
			            { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),
			          $(go.TextBlock, "结束",
			            { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
			            new go.Binding("text"))
			        ),
			        // three named ports, one on each side except the bottom, all input only:
			        makePort("T", go.Spot.Top, false, true),
			        makePort("L", go.Spot.Left, false, true),
			        makePort("R", go.Spot.Right, false, true)
			      ));
			
			    this.myDiagram.nodeTemplateMap.add("标签",
			      $(go.Node, "Auto", nodeStyle(),
			        $(go.Shape, "File",
			          { fill: "#EFFAB4", stroke: null }),
			        $(go.TextBlock,
			          {
			            margin: 5,
			            maxSize: new go.Size(200, NaN),
			            wrap: go.TextBlock.WrapFit,
			            textAlign: "center",
			            editable: true,
			            font: "Arial",
			            stroke: '#454545'
			          },
			          new go.Binding("text").makeTwoWay())
			        // no ports, because no links are allowed to connect with a comment
			      ));
			
			
			    // replace the default Link template in the linkTemplateMap
			    this.myDiagram.linkTemplate =
			      $(go.Link,  // the whole link panel
			        {
			          routing: go.Link.AvoidsNodes,
			          curve: go.Link.JumpOver,
			          corner: 5, toShortLength: 4,
			          relinkableFrom: true,
			          relinkableTo: true,
			          reshapable: true,
			          resegmentable: true,
			          // mouse-overs subtly highlight links:
			          mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
			          mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
			        },
			        new go.Binding("points").makeTwoWay(),
			        $(go.Shape,  // the highlight shape, normally transparent
			          { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
			        $(go.Shape,  // the link path shape
			          { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
			        $(go.Shape,  // the arrowhead
			          { toArrow: "standard", stroke: null, fill: "gray"}),
			        $(go.Panel, "Auto",  // the link label, normally not visible
			          { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
			          new go.Binding("visible", "visible").makeTwoWay(),
			          $(go.Shape, "RoundedRectangle",  // the label shape
			            { fill: "#F8F8F8", stroke: null }),
			          $(go.TextBlock, "TO",  // the label
			            {
			              textAlign: "center",
			              font: "10pt helvetica, arial, sans-serif",
			              stroke: "#333333",
			              editable: true
			            },
			            new go.Binding("text").makeTwoWay())
			        )
			      );
			
			    // Make link labels visible if coming out of a "conditional" node.
			    // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
			    function showLinkLabel(e) {
			      var label = e.subject.findObject("LABEL");
			      if (label !== null) label.visible = (e.subject.fromNode.data.figure === "Diamond");
			    }
			
			    // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
			    this.myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
			    this.myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
			
			    this.load();  // load an initial diagram from some JSON text加载原有流程
			
			    // initialize the Palette that is on the left side of the page
			    this.myPalette =
			      $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
			        {
			          "animationManager.duration": 800, // slightly longer than default (600ms) animation
			          nodeTemplateMap: this.myDiagram.nodeTemplateMap,  // share the templates used by this.myDiagram
			          model: new go.GraphLinksModel([  // specify the contents of the Palette
			            { category: "开始", text: "开始" },
			            { text: "节点" },
			            { text: "条件", figure: "Diamond" },
			            { category: "结束", text: "结束" },
			            { category: "标签", text: "标签" }
			          ])
			        });
			
			    // The following code overrides GoJS focus to stop the browser from scrolling
			    // the page when either the Diagram or Palette are clicked or dragged onto.
			
			    function customFocus() {
			      var x = window.scrollX || window.pageXOffset;
			      var y = window.scrollY || window.pageYOffset;
			      go.Diagram.prototype.doFocus.call(this);
			      window.scrollTo(x, y);
			    }
				function save() {
				   document.getElementById("myDiagramDiv").value = this.myDiagram.model.toJson();
				}
			    this.myDiagram.doFocus = customFocus;
			    this.myPalette.doFocus = customFocus;
					
			},
			load() {
			    this.myDiagram.model = go.Model.fromJson(this.data);
			    this.content=this.myDiagram.model.toJson();
			},
			post(){
				console.log(this.myDiagram.model.toJson())
			}
		}
	}
</script>

<style scoped src='../../../static/css/all.css'>

</style>
<style scoped type="text/css">
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
	.tablecontent{
		position: absolute;
		right:-4%;
		display: inline-block; vertical-align: top;
		 width:100px;
		z-index: 999;
	}
	
	#myPaletteDiv{
		height: 300px;
		background:#263238;
	}
	#myDiagramDiv{
		width:100%;height:1300px;
	}
	.save-btn{
		width: 100%;
		display: block;
		line-height: 50px;
		background: #4e97d9;
		text-align: center;
		color: #fff;
		cursor: pointer;
	}
</style>